

<!--<template>-->
<!--  <div style="padding: 10px">-->
<!--    &lt;!&ndash;功能区域&ndash;&gt;-->
<!--    <div style="margin: 10px 0">-->
<!--      <el-button type="primary" @click="add">新增</el-button>-->
<!--    </div>-->
<!--    &lt;!&ndash;搜索区域&ndash;&gt;-->
<!--&lt;!&ndash;    <div style="margin: 10px 0; display: flex; align-items: center;">&ndash;&gt;-->
<!--&lt;!&ndash;      <el-input v-model="roomNameQuery" placeholder="请输入房间名进行查询" style="width: 20%" clearable></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;      <el-button type="primary" style="margin-left: 5px" size="medium" @click="searchByRoomName">查询</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;      <el-button type="danger" style="margin-left: 5px" size="medium" @click="batchDelete">批量删除</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;    </div>&ndash;&gt;-->
<!--    &lt;!&ndash;表格区域&ndash;&gt;-->
<!--    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">-->
<!--      <el-table-column type="selection" width="55"></el-table-column>-->
<!--      <el-table-column prop="id" label="ID"/>-->
<!--      <el-table-column prop="userId" label="身份证"/>-->
<!--      <el-table-column prop="roomType" label="房间类型"/>-->
<!--      <el-table-column prop="status" label="状态"/>-->
<!--      <el-table-column prop="name" label="顾客名"/>-->
<!--      <el-table-column prop="phone" label="电话号码"/>-->
<!--      <el-table-column prop="checkinDate" label="入住日期"/>-->
<!--      <el-table-column prop="orderTime" label="订购日期"/>-->
<!--      <el-table-column prop="remarks" label="备注"/>-->
<!--      <el-table-column label="操作">-->
<!--        <template #default="scope">-->
<!--          <div style="display: flex; justify-content: center;">-->
<!--            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>-->
<!--            <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.id)">-->
<!--              <template #reference>-->
<!--                <el-button type="text">删除</el-button>-->
<!--              </template>-->
<!--            </el-popconfirm>-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->


<!--    &lt;!&ndash;底部分页&ndash;&gt;-->
<!--    <div style="margin: 10px 0">-->
<!--      <el-pagination-->
<!--          v-model:current-page="currentPage"-->
<!--          v-model:page-size="pageSize"-->
<!--          :page-sizes="[5, 10, 20]"-->
<!--          :small="small"-->
<!--          :disabled="disabled"-->
<!--          :background="background"-->
<!--          layout="total, sizes, prev, pager, next, jumper"-->
<!--          :total="total"-->
<!--          @size-change="handleSizeChange"-->
<!--          @current-change="handleCurrentChange"-->
<!--      />-->

<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import request from "@/utils/request";-->

<!--export default {-->
<!--  name: "Order",-->
<!--  components: {},-->
<!--  data() {-->
<!--    return {-->
<!--      /*前端中的一些变量*/-->
<!--      form: {},-->
<!--      search: '',-->
<!--      currentPage: 1,-->
<!--      total: 10,-->
<!--      pageSize: 10,-->
<!--      tableData: [],-->

<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    handleEdit(row) {-->
<!--      /**-->
<!--       * 进行深拷贝-->
<!--       * 将row对象的值深拷贝给form表单对象-->
<!--       * @type {any}-->
<!--       */-->
<!--      this.form = JSON.parse(JSON.stringify(row));-->
<!--      //弹出弹窗-->
<!--      this.dialogVisible = true;-->

<!--    },-->


<!--    /*-->
<!--    删除，根据id删除-->
<!--     */-->
<!--    handleDelete(id) {-->

<!--      request.delete("/hotelRoom/deleteHotelRoom/" + id).then(res => {-->
<!--        if (res.code === '0') {-->
<!--          this.$message({-->
<!--            type: "success",-->
<!--            message: '删除成功'-->
<!--          })-->
<!--        } else {-->
<!--          this.$message({-->
<!--            type: "error",-->
<!--            message: "删除失败"-->
<!--          })-->
<!--        }-->

<!--        this.load();//删除后需要重新加载表格-->
<!--      })-->

<!--    },-->
<!--    handleSizeChange() {-->
<!--      //改变当前个数触发-->
<!--      this.load();//重新刷新表格数据-->

<!--    },-->
<!--    handleCurrentChange() {-->
<!--      //改变当前页数触发-->
<!--      this.load();//重新刷新表格数据-->
<!--    },-->

<!--    /**-->
<!--     * 增加-->
<!--     */-->
<!--    add() {-->
<!--      //点击新增按钮，然后弹出弹框-->
<!--      this.dialogVisible = true;-->
<!--      //弹出弹窗则需要清空form中的数据，也就是将from中的表单的数据清空-->
<!--      this.form = {}//清空表单域 每次一打开这个表单则直接清空form中之前的数据-->
<!--    },-->

<!--    /*-->
<!--    新增接口-->
<!--    * */-->
<!--    save() {-->
<!--      if (this.form.id) {-->
<!--        //如果form对象中有id 则直接更新-->
<!--        request.put("/hotelRoom/updateHotelRoom", this.form).then(res => {-->
<!--          console.log(res);-->
<!--          //通过返回结果中的值先进行判断是否更新成功-->
<!--          //其中res的数据与后端对应-->
<!--          if (res.code === '0') {-->
<!--            this.$message({-->
<!--              type: "success",-->
<!--              message: "更新成功"-->
<!--            })-->
<!--          } else {-->
<!--            this.$message({-->
<!--              type: "error",-->
<!--              //res.msg是打印出成功或则失败的信息-->
<!--              message: res.msg-->
<!--            })-->
<!--          }-->
<!--          this.load();//刷新页面，重新加载查询-->
<!--          this.dialogVisible = false;//更新成功后关闭弹窗-->
<!--        })-->
<!--      } else {-->
<!--        //如果没有id则直接新增-->
<!--        request.post("/hotelRoom/hotelRoomAdd", this.form).then(res => {-->
<!--          console.log(res)-->
<!--          if (res.code === '0') {-->
<!--            //其中的￥。message是自带的提示，如果更新成功，则提示更新成功-->
<!--            this.$message({-->
<!--              type: "success",-->
<!--              message: "新增成功"-->
<!--            })-->
<!--          } else {-->
<!--            this.$message({-->
<!--              type: "error",-->
<!--              message: res.msg-->
<!--            })-->
<!--          }-->
<!--          this.load();//新增成功后直接刷新表格中的数据-->
<!--          this.dialogVisible = false;//然后关闭弹窗-->
<!--        })-->
<!--      }-->


<!--    },-->




<!--    /*-->
<!--    分页查询接口-->
<!--    * */-->
<!--    load() {-->
<!--      request.get("/hotelBooking/getHotelBookingsPage", {-->
<!--        /*其中的请求参数，注意其中的{}这样写-->
<!--        前面要和后端中接口的参数名一致性，后面要和前端中的参数名一致-->
<!--        this.  代表的是前端的数据-->
<!--        * */-->
<!--        /**-->
<!--         * 其中params-->
<!--         * 是get请求中使用的，如果是需要请求参数在get请求中则必需使用这个params-->
<!--         * 但是如果是在post请求中，-->
<!--         * 则直接this.form-->
<!--         */-->
<!--        params: {-->
<!--          pageNumber: this.currentPage,-->
<!--          pageSize: this.pageSize,-->
<!--          search: this.search-->
<!--        }-->

<!--      }).then(res => {-->
<!--        console.log(res);-->
<!--        /*将返回得到的res.data.records中的数据复制给前端中的tableData属性-->
<!--        * 这样即可展示在前端页面*/-->
<!--        this.tableData = res.list;-->
<!--        this.total = res.total;-->

<!--      })-->
<!--    },-->

<!--    batchDelete() {-->
<!--      if (this.selectedIds.length === 0) {-->
<!--        this.$message({-->
<!--          type: 'warning',-->
<!--          message: '请先选择要删除的行'-->
<!--        });-->
<!--        return;-->
<!--      }-->
<!--      request.delete("/hotelRoom/deleteHotelRoomsByIds", {-->
<!--        data: this.selectedIds-->
<!--      }).then(res => {-->
<!--        if (res.code === '0') {-->
<!--          this.$message({-->
<!--            type: "success",-->
<!--            message: '批量删除成功'-->
<!--          });-->
<!--          this.load();-->
<!--          this.selectedIds = [];-->
<!--        } else {-->
<!--          this.$message({-->
<!--            type: "error",-->
<!--            message: "批量删除失败"-->
<!--          });-->
<!--        }-->
<!--      });-->
<!--    },-->

<!--    handleSelectionChange(selection) {-->
<!--      this.selectedIds = selection.map(item => item.id);-->
<!--    },-->

<!--  },-->

<!--  /*这个方法是页面以架子啊就执行其中的方法*/-->
<!--  created() {-->
<!--    this.load();-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.el-input__inner {-->
<!--  text-overflow: ellipsis;-->
<!--  overflow: hidden;-->
<!--  white-space: nowrap;-->
<!--}-->

<!--</style>-->



